<template>
	<view :class="[config.style]">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<view class="withdraw-section">
			
			<view class="item fee">
				<view class="title">
				可提现佣金余额
				</view>
				<view class="charges">
				   <text class="allow">￥ {{promoter.enable_charges}} </text>
				   <text class="freeze">（已冻结：￥{{promoter.freeze}})</text>
				</view>
			</view>
			
			<view class="item type">
				<view class="header">提现方式</view>
				<view class="list">
					<view class="type-item wx">
						<view class="logo">
							<image src="../../../static/images/wechat.png" mode="widthFix"></image>
						</view>
						<view class="title">
							微信
						</view>
						<view class="active">
							<text class="iconfont active">&#xe7a3;</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item description">
				<view class="header">提现说明</view>
				<view class="p">1.每用户每日最多可提现{{pluginConfig.withdraw_config.number}}次,</view>
				<view class="p">2.提现最低金额为{{pluginConfig.withdraw_config.low_fee}}元，单笔最高金额为{{pluginConfig.withdraw_config.high_fee}}元</view>
				<view class="p">3.通常情况下，提现金额会秒到账，具体到账时间也可能发生延迟，请小伙伴们耐心等待</view>
				<view class="p">4.如提现24小时内未到账可联系客服为您手动处理</view>
				
			</view>
			
		</view>
		
		<view class="withdraw-active">
			<button type="default" size="default" class="withdraw-btn" hover-class="withdraw-btn-hover" @click="withdraw()">
				立即提现
			</button>
		</view>
		
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import FullscreenLoading from '../../../components/muu-fullscreen-loading/muu-fullscreen-loading.vue'
	
	export default {
		components: {
			FullscreenLoading,
		},
		data() {
			return {
				loading: true, //加载中
				pluginConfig: {}, //插件配置
				promoter: {},
				
			}
		},
		onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			Promise.all([this.getPluginConfig(),this.getPromoter()]).then(res => {
				console.log(res)
				//加载完成
				this.loading = false
			})
		},
		created() {
			
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			/**
			 * 获取分销插件配置
			 */
			getPluginConfig: function(){
				let that = this
				return new Promise((resolve, reject) => {
					//获取分销插件配置
					let data = {}
					
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/distribution'
						data.action = 'config'
						//#endif
						//#ifdef H5
						url = 'entry/site/config'
						data.action = 'config'
						data.m = 'muu_classroom_plugin_distribution'
						//#endif
					this.util.request({
						url : url,
						data: data,
						success: function (res) {
							if (res.data.code == 200) {
								that.pluginConfig = res.data.data
							}
							resolve(res)
						},
						fail: function(res){
							reject(res)
						}
					})
				})
			},
			
			/**
			 * 获取分销商数据
			 */
			getPromoter: function(){
				let that = this
				return new Promise((resolve, reject) => {
					//获取数据
					let data = {}
					let url = ''
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/distribution'
						data.action = 'promoter'
						//#endif
						//#ifdef H5
						url = 'entry/site/promoter'
						data.m = 'muu_classroom_plugin_distribution'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.promoter = res.data.data
							}else{
								if(res.data.data == 'not_promoter'){
									that.promoter = res.data.data
								}
							}
							resolve(resolve)
						},
						fail: function(res){
							reject(res)
						}
					})
				})
			},
			
			/**
			 * 向服务端发起提现申请
			 */
			withdraw: function(){
				console.log('withdraw POST')
				let price = this.promoter.enable_charges
				let data = {}
					data.price = price
				let url = ''
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/distribution'
					data.action = 'withdraw'
					//#endif
					//#ifdef H5
					url = 'entry/site/withdraw'
					data.m = 'muu_classroom_plugin_distribution'
					data.action = 'create'
					//#endif
				this.util.request({
					url : url,
					data: data,
					method: 'POST',
					
					success: function (res) {
						//console.log(res.data);
						if (res.data.code == 200) {
							uni.showModal({
								title: '温馨提示',
								content: res.data.msg,
								success: (cb)=> {
									if (cb.confirm) {
										console.log('用户点击确定');
									} else if (cb.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon: 'none'
							});
						}
					}
				})
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f8f8f8;
		min-height: 100%;
		height: auto;
	}
	.withdraw-section {
		padding-bottom: 120rpx;
		.item {
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			.header {
				font-size: 36rpx;
				margin-bottom: 20rpx;
				font-weight: 700;
			}
		}
		
		.fee {
			padding: 60rpx 0;
			.title {
				text-align: center;
				color: #999;
				padding: 20rpx 0;
			}
			.charges {
				text-align: center;
				font-size: 42rpx;
				color: #f60;
				.allow {
					
				}
				.freeze {
					font-size: 28rpx;
					color: #999;
				}
			}
		}
		
		.type {
			.list {
				.type-item {
					display: flex;
					
					.logo {
						width: 96rpx;
						height: 96rpx;
						image {
							width: 96rpx;
							heigh: 96rpx;
							border-radius: 50%;
						}
					}
					.title {
						flex: 1;
						margin: 0 20rpx;
						font-size: 28rpx;
						line-height: 96rpx;
					}
					.active {
						width: 40rpx;
						text-align: center;
						line-height: 96rpx;
					}
				}
			}
		}
		
		.description {
			
			.p {
				font-size: 28rpx;
				line-height: 42rpx;
				color: #999;
			}
		}
	}
	
	.withdraw-active {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 10rpx;
		padding: 0 40rpx;
		
		.withdraw-btn {
			display: block;
			color: #fff;
			&::after {
				border: 0;
			}
		}
		.withdraw-btn-hover {
			color: #fff;
		}
	}
	
	
	/*页面风格设计*/
	.Blue {

		.withdraw-active {
			.withdraw-btn {
				background-color: $Blue;
			}
			.withdraw-btn-hover {
				background-color: $Blue-hover;
			}
		}
	}
	.Green {

		.withdraw-active {
			.withdraw-btn {
				background-color: $Green;
			}
			.withdraw-btn-hover {
				background-color: $Green-hover;
			}
		}
	}
	.LightRed {

		.withdraw-active {
			.withdraw-btn {
				background-color: $LightRed;
			}
			.withdraw-btn-hover {
				background-color: $LightRed-hover;
			}
		}
	}
	.Orange {

		.withdraw-active {
			.withdraw-btn {
				background-color: $Orange;
			}
			.withdraw-btn-hover {
				background-color: $Orange-hover;
			}
		}
	}
	.LightPink {

		.withdraw-active {
			.withdraw-btn {
				background-color: $LightPink;
			}
			.withdraw-btn-hover {
				background-color: $LightPink-hover;
			}
		}
	}
	.Magenta {

		.withdraw-active {
			.withdraw-btn {
				background-color: $Magenta;
			}
			.withdraw-btn-hover {
				background-color: $Magenta-hover;
			}
		}
	}
	
</style>
